<template>
  <view class="mybox-container">
    <view class="mybox-header">
      <text class="mybox-title">我的包裹</text>
    </view>
    <view class="mybox-package-list">
      <view v-for="(item, index) in packages" :key="index" class="mybox-package-item">
        <view class="mybox-package-header">
          <view class="mybox-package-title">
            <text class="mybox-icon-box">📦</text>
            <text>包裹 {{ index + 1 }}</text>
          </view>
          <view :class="['mybox-package-status', item.statusClass]">
            {{ item.status }}
          </view>
        </view>
        <scroll-view class="mybox-package-content" scroll-x="true">
          <view class="mybox-package-scroll">
            <view v-for="(product, productIndex) in item.products" :key="productIndex" class="mybox-product-item">
              <image class="mybox-product-image" :src="product.image" mode="aspectFill"></image>
              <text class="mybox-product-name">{{ product.name }}</text>
            </view>
          </view>
        </scroll-view>
        <view class="mybox-package-info">
          <text class="mybox-carrier">承运人：{{ item.carrier }}</text>
          <text class="mybox-update">最新更新：{{ item.update }}</text>
        </view>
      </view>
    </view>
	
  </view>
</template>

<script>
export default {
  data() {
    return {
      packages: [
        {
          status: "已签收",
          statusClass: "mybox-status-green",
          carrier: "京东快递",
          update: "您的快件已由【权根菊】代收，感谢您使用京东物流...",
          products: [
            { name: "智能手机", image: "/static/images/phone.jpg" },
            { name: "蓝牙耳机", image: "/static/images/earphone.jpg" },
            { name: "充电宝", image: "/static/images/powerbank.jpg" },
          ]
        },
        {
          status: "已发货",
          statusClass: "mybox-status-orange",
          carrier: "顺丰速运",
          update: "您的快件已从【北京转运中心】发出，准备送往【上海】...",
          products: [
            { name: "笔记本电脑", image: "/static/images/laptop.jpg" },
            { name: "无线鼠标", image: "/static/images/mouse.jpg" },
          ]
        },
        {
          status: "运输中",
          statusClass: "mybox-status-blue",
          carrier: "圆通速递",
          update: "您的快件已到达【广州集散中心】，正在分拣中...",
          products: [
            { name: "运动鞋", image: "/static/images/shoes.jpg" },
            { name: "运动服", image: "/static/images/sportswear.jpg" },
            { name: "瑜伽垫", image: "/static/images/yogamat.jpg" },
          ]
        },
      ],
    };
  },
};
</script>

<style>
.mybox-container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.mybox-header {
  margin-bottom: 20rpx;
}

.mybox-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.mybox-package-list {
  display: flex;
  flex-direction: column;
}

.mybox-package-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.mybox-package-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.mybox-package-title {
  display: flex;
  align-items: center;
}

.mybox-icon-box {
  margin-right: 10rpx;
}

.mybox-package-status {
  font-size: 28rpx;
  font-weight: bold;
}

.mybox-status-green {
  color: #52c41a;
}

.mybox-status-orange {
  color: #ff9900;
}

.mybox-status-blue {
  color: #1890ff;
}

.mybox-package-content {
  width: 100%;
  white-space: nowrap;
  margin-bottom: 20rpx;
}

.mybox-package-scroll {
  display: inline-block;
}

.mybox-product-item {
  display: inline-block;
  width: 160rpx;
  margin-right: 20rpx;
  text-align: center;
}

.mybox-product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
}

.mybox-product-name {
  display: block;
  font-size: 24rpx;
  color: #333;
  margin-top: 10rpx;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mybox-package-info {
  margin-top: 20rpx;
}

.mybox-carrier,
.mybox-update {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}
</style>